<template>
  <div class="content">
    <div class="contentInfo">
      <TitleComponent title="详细信息" />
    <div class="state">员工状态</div>
    <div class="stateContent">
      {{ route.query.status }}
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        id="el-tabs__content"
        v-for="item in tabList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-position="top"
          label-width="auto"
        >
          <template v-if="item.name === 'seventh'">
            <div class="form-group">
              <div class="section-title">社保方案</div>
              <el-row :gutter="24">
                <template
                  v-for="(field, index) in item.formList.slice(0, 3)"
                  :key="index"
                >
                  <el-col :span="field.col" v-if="!field.hidden">
                    <el-form-item :label="field.label">
                      <div
                        class="input-with-eye"
                        v-if="
                          field.prop === 'socialSecurityNo' ||
                          field.prop === 'providentFundNo' ||
                          field.prop === 'bankCardNo'
                        "
                      >
                        <el-input
                          v-model="
                            form[
                              !showEncrypted[field.prop]
                                ? field.prop
                                : field.prop + 'Vo'
                            ]
                          "
                          disabled
                        />
                        <el-icon
                          class="eye-icon"
                          @click="toggleEncrypted(field.prop)"
                        >
                          <component
                            :is="showEncrypted[field.prop] ? 'View' : 'Hide'"
                          />
                        </el-icon>
                      </div>
                      <el-input
                        v-else-if="!field.isSpacil && !field.type"
                        v-model="form[field.prop]"
                        disabled
                      />
                      <el-date-picker
                        v-else-if="field.type === 'date'"
                        v-model="form[field.prop]"
                        type="date"
                        placeholder="选择日期"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        disabled
                      />
                      <Upload
                        v-else-if="field.isSpacil"
                        v-model="form[field.prop]"
                        :isShowTip="false"
                        :fileType="fileType"
                        :disabled="true"
                        :showUploadButton="false"
                      />
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>

              <div class="section-title">薪资福利</div>
              <el-row :gutter="24">
                <template
                  v-for="(field, index) in item.formList.slice(3, 5)"
                  :key="index"
                >
                  <el-col :span="field.col">
                    <el-form-item :label="field.label">
                      <el-input
                        v-if="!field.isSpacil && !field.type"
                        v-model="form[field.prop]"
                        disabled
                      />
                      <el-date-picker
                        v-if="field.type === 'date'"
                        v-model="form[field.prop]"
                        type="date"
                        placeholder="选择日期"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        disabled
                      />
                      <Upload
                        v-if="field.isSpacil"
                        v-model="form[field.prop]"
                        :isShowTip="false"
                        :fileType="fileType"
                        :disabled="true"
                        :showUploadButton="false"
                      />
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>

              <div class="section-title">银行卡信息</div>
              <el-row :gutter="24">
                <template
                  v-for="(field, index) in item.formList.slice(5)"
                  :key="index"
                >
                  <el-col :span="field.col">
                    <el-form-item :label="field.label">
                      <div
                        class="input-with-eye"
                        v-if="field.prop === 'bankCardNo'"
                      >
                        <el-input
                          v-model="
                            form[
                              !showEncrypted[field.prop]
                                ? field.prop
                                : field.prop + 'Vo'
                            ]
                          "
                          disabled
                        />
                        <el-icon
                          class="eye-icon"
                          @click="toggleEncrypted(field.prop)"
                        >
                          <component
                            :is="showEncrypted[field.prop] ? 'View' : 'Hide'"
                          />
                        </el-icon>
                      </div>
                      <el-input
                        v-else-if="!field.isSpacil && !field.type"
                        v-model="form[field.prop]"
                        disabled
                      />
                      <el-date-picker
                        v-else-if="field.type === 'date'"
                        v-model="form[field.prop]"
                        type="date"
                        placeholder="选择日期"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        disabled
                      />
                      <Upload
                        v-else-if="field.isSpacil"
                        v-model="form[field.prop]"
                        :isShowTip="false"
                        :fileType="fileType"
                        :disabled="true"
                        :showUploadButton="false"
                      />
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>
            </div>
          </template>
          <template v-else>
            <div class="form-group">
              <el-row :gutter="24">
                <template v-for="(field, index) in item.formList" :key="index">
                  <el-col :span="field.col">
                    <el-form-item
                      :label="field.label"
                      :class="{ 'title-item': field.isTitle }"
                      :prop="field.prop"
                    >
                      <template v-if="field.isTitle">
                        <div class="title-content">{{ field.label }}</div>
                      </template>
                      <template v-else>
                        <el-input
                          disabled
                          v-if="
                            !field.isSpacil &&
                            !field.type &&
                            field.prop !== 'sex' &&
                            field.prop !== 'age' &&
                            field.prop !== 'joinType'
                          "
                          v-model="form[field.prop]"
                        />
                        <el-select
                          v-if="field.prop === 'sex'"
                          v-model="form[field.prop]"
                          placeholder="请选择性别"
                          disabled
                        >
                          <el-option label="男" :value="0" />
                          <el-option label="女" :value="1" />
                        </el-select>
                        <el-select
                          v-if="field.prop === 'joinType'"
                          v-model="form[field.prop]"
                          placeholder="请选择入职类型"
                          disabled
                        >
                          <el-option
                            v-for="item in normalizedTransferType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                        <el-date-picker
                          v-if="field.type === 'date'"
                          v-model="form[field.prop]"
                          type="date"
                          placeholder="选择日期"
                          format="YYYY/MM/DD"
                          value-format="YYYY-MM-DD"
                          disabled
                        />
                        <el-input
                          v-if="field.prop === 'age'"
                          v-model="form[field.prop]"
                          disabled
                        />
                        <Upload
                          v-if="field.isSpacil"
                          v-model="form[field.prop]"
                          :isShowTip="false"
                          :fileType="fileType"
                          @update:modelValue="
                            (files) => uploadFiles(files, field.prop)
                          "
                          @delete="
                            (files) => handleFileDelete(files, field.prop)
                          "
                        />
                      </template>
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>
            </div>
          </template>
        </el-form>
        <div v-if="item.tableData" class="table-container">
          <h2>{{ Htitle }}</h2>
          <el-table
            :height="calculatedTableHeight"
            :data="item.tableData"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="80" />
            <!-- 教育信息 -->
            <el-table-column
              v-if="activeName === 'fourth'"
              prop="startTime"
              label="开始时间"
            />
            <el-table-column
              v-if="activeName === 'fourth'"
              prop="endTime"
              label="结束日期"
            />
            <el-table-column
              v-if="activeName === 'fourth'"
              prop="companyName"
              label="院校名称"
            />
            <el-table-column
              v-if="activeName === 'fourth'"
              prop="profession"
              label="专业名称"
            />
            <el-table-column
              v-if="activeName === 'fourth'"
              prop="educationalBackground"
              label="学历"
            />
            <!-- 工作信息 -->
            <el-table-column
              v-if="activeName === 'fifth'"
              prop="startTime"
              label="开始时间"
            />
            <el-table-column
              v-if="activeName === 'fifth'"
              prop="endTime"
              label="结束日期"
            />
            <el-table-column
              v-if="activeName === 'fifth'"
              prop="companyName"
              label="公司名称"
            />
            <el-table-column
              v-if="activeName === 'fifth'"
              prop="positionHeld"
              label="担任职务"
            />
            <el-table-column
              v-if="activeName === 'fifth'"
              prop="mainWorkContent"
              label="主要工作内容"
            />
            <el-table-column
              v-if="activeName === 'fifth'"
              prop="remarks"
              label="备注"
            />
            <!-- 合同信息 -->
            <el-table-column
              v-if="activeName === 'sixth'"
              prop="startTime"
              label="合同签订时间"
            />
            <el-table-column
              v-if="activeName === 'sixth'"
              prop="endTime"
              label="合同到期时间"
            />
            <el-table-column
              v-if="activeName === 'sixth'"
              prop="yearNum"
              label="合同年限"
            />
            <el-table-column
              v-if="activeName === 'sixth'"
              prop="number"
              label="签订次数"
            />
            <el-table-column
              v-if="activeName === 'sixth'"
              prop="contractNo"
              label="合同编号"
            />
          </el-table>
          <!-- <el-button @click="openDialog(addButtonTitle)" v-if="tabIndex == 3 || tabIndex == 4">{{ addButtonTitle
            }}</el-button> -->
        </div>
      </el-tab-pane>
    </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { updateById, getDetailById } from "@/api/employeeRelations/Archive";
import Upload from "@/components/FileUpload/index.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import { type } from "windicss/utils";
import { View, Hide } from "@element-plus/icons-vue";
const dialogFormVisible = ref(false);
const router = useRouter();
const activeName = ref("first");
const fileType = ref([
  "doc",
  "xls",
  "ppt",
  "txt",
  "pdf",
  "docx",
  "xlsx",
  "pptx",
  "jpg",
  "png",
]);
const tabIndex = ref(0);
const Htitle = ref("");
const formRef = ref(null);
const topHeight = ref(0);
const isHeightCalculated = ref(false);
const calculatedTableHeight = ref("0");
const addButtonTitle = ref("新增教育经历");
const tabList = ref([
  {
    label: "员工信息",
    name: "first",
    formList: [
      {
        label: "员工账号",
        prop: "userName",
        col: 6,
      },
      {
        label: "工号",
        prop: "jobNumber",
        col: 6,
      },
    ],
  },
  {
    label: "岗位信息",
    name: "second",
    formList: [
      {
        label: "岗位名称",
        prop: "applicationPositonName",
        col: 6,
      },
      {
        label: "岗位性质",
        prop: "jobNature",
        col: 6,
      },
      {
        label: "任职部门",
        prop: "deptName",
        col: 6,
      },
      {
        label: "职级",
        prop: "positionLevel",
        col: 6,
      },
      {
        label: "直属领导",
        prop: "directLeaderName",
        col: 6,
      },
      {
        label: "最高领导",
        prop: "supremeLeaderName",
        col: 6,
      },
    ],
  },
  {
    label: "个人信息",
    name: "third",
    formList: [
      {
        label: "姓名",
        prop: "name",
        col: 6,
      },
      {
        label: "性别",
        prop: "sex",
        col: 6,
      },
      {
        label: "身份证号",
        prop: "idNumber",
        col: 6,
      },
      {
        label: "出生日期",
        prop: "birthTime",
        col: 6,
        type: "date",
      },
      {
        label: "年龄",
        prop: "age",
        col: 6,
      },
      {
        label: "联系电话",
        prop: "phoneNumber",
        col: 6,
      },
      {
        label: "工作邮箱",
        prop: "mail",
        col: 6,
      },
      {
        label: "民族",
        prop: "ethnicGroup",
        col: 6,
      },
      {
        label: "籍贯",
        prop: "nativePlace",
        col: 6,
      },
      {
        label: "婚姻状况",
        prop: "isMarital",
        col: 6,
      },
      {
        label: "政治面貌",
        prop: "politicalStatus",
        col: 6,
      },
      {
        label: "毕业院校",
        prop: "graduateSchool",
        col: 6,
      },
      {
        label: "专业",
        prop: "profession",
        col: 6,
      },
      {
        label: "简历附件",
        prop: "resumeFile",
        col: 12,
        isSpacil: "file",
      },
      {
        label: "个人照片",
        prop: "personPhoto",
        col: 12,
        isSpacil: "image",
      },
    ],
  },
  {
    label: "教育信息",
    name: "fourth",
    formList: [
      {
        label: "最高学历",
        prop: "educationalBackground",
        col: 12,
      },
      {
        label: "最高学历证书",
        prop: "certificate",
        col: 12,
        isSpacil: "image",
      },
    ],
    tableData: [],
  },
  {
    label: "工作信息",
    name: "fifth",
    formList: [
      {
        label: "入职类型",
        prop: "joinType",
        col: 6,
      },
      {
        label: "应聘渠道",
        prop: "applicationSource",
        col: 6,
      },
      {
        label: "首次参加工作日期",
        prop: "firstWorkDate",
        col: 6,
        type: "date",
      },
      {
        label: "离职日期",
        prop: "dimissionDate",
        col: 6,
        type: "date",
      },
      {
        label: "毕业日期",
        prop: "graduationDate",
        col: 6,
        type: "date",
      },
      {
        label: "离职证明/三方协议",
        prop: "dimissionProof",
        col: 6,
        isSpacil: "file",
      },
    ],
    tableData: [],
  },
  {
    label: "合同信息",
    name: "sixth",
    formList: [
      {
        label: "合同签订主体",
        prop: "contractMain",
        col: 6,
      },
      {
        label: "入职日期",
        prop: "becomeJoinTime",
        col: 6,
        type: "date",
      },
      {
        label: "试用期到期日期",
        prop: "trialEndDate",
        col: 6,
        type: "date",
      },
      {
        label: "离职日期",
        prop: "dimissionTime",
        col: 6,
        type: "date",
      },
    ],
    tableData: [],
  },
  {
    label: "薪资信息",
    name: "seventh",
    formList: [
      {
        label: "社保账号",
        prop: "socialSecurityNo",
        col: 8,
      },
      {
        label: "公积金账号",
        prop: "providentFundNo",
        col: 8,
      },
      {
        label: "社保方案",
        prop: "socialSecurityScheme",
        col: 8,
        hidden: true,
      },
      {
        label: "薪资标准",
        prop: "salaryScale",
        col: 8,
      },
      {
        label: "其他补贴",
        prop: "otherSubsidy",
        col: 8,
      },
      {
        label: "银行卡账号",
        prop: "bankCardNo",
        col: 6,
      },
      {
        label: "持卡人姓名",
        prop: "bankCardName",
        col: 6,
      },
      {
        label: "开户银行",
        prop: "bank",
        col: 6,
      },
      {
        label: "银行卡扫描件",
        prop: "cardFile",
        col: 6,
        isSpacil: "image",
      },
    ],
  },
  {
    label: "其他信息",
    name: "eighth",
    formList: [
      {
        label: "离职证明/三方协议",
        prop: "dimissionProof",
        col: 24,
        isSpacil: "file",
      },
      {
        label: "备注",
        prop: "remark",
        col: 24,
      },
    ],
  },
]);
const route = useRoute();
const form = reactive({
  // 员工信息
  userName: "", // 员工账号
  jobNumber: "", // 工号
  phoneNumber: "", // 联系电话
  mail: "", // 邮箱

  // 岗位信息
  applicationPositonName: "", // 岗位名称
  jobNature: "", // 岗位性质
  deptId: "", // 任职部门ID
  deptName: "", // 任职部门名称
  positionLevel: "", // 职级
  directLeaderId: "", // 直属领导ID
  directLeaderName: "", // 直属领导名称
  supremeLeaderId: "", // 最高领导ID
  supremeLeaderName: "", // 最高领导名称

  // 个人信息
  name: "", // 姓名
  sex: "", // 性别
  idNumber: "", // 身份证号
  birthTime: "", // 出生日期
  age: "", // 年龄
  ethnicGroup: "", // 民族
  nativePlace: "", // 籍贯
  isMarital: "", // 婚姻状况
  politicalStatus: "", // 政治面貌
  graduateSchool: "", // 毕业院校
  profession: "", // 专业
  resumeFile: "", // 简历附件
  personPhoto: "", // 个人照片

  // 教育信息
  educationalBackground: "", // 最高学历
  certificate: "", // 最高学历证书
  educationExperiences: [], // 主要教育经历

  // 工作信息
  joinType: "", // 入职类型
  applicationSource: "", // 应聘渠道
  firstWorkDate: "", // 首次参加工作日期
  dimissionDate: "", // 离职日期
  graduationDate: "", // 毕业日期
  dimissionProof: "", // 离职证明
  tripartiteAgreement: "", // 三方协议
  workExperiences: [], // 主要工作经历

  // 合同信息
  becomeJoinTime: "", // 入职日期
  contractMain: "", // 合同签订主体
  trialEndDate: "", // 试用期到期日期
  dimissionTime: "", // 离职日期
  contractInfos: [], // 合同信息

  // 薪资信息
  socialSecurityNo: "", // 社保账号
  socialSecurityNoVo: "", // 社保账号显示值
  providentFundNo: "", // 公积金账号
  providentFundNoVo: "", // 公积金账号显示值
  socialSecurityScheme: "", // 社保方案
  salaryScale: "", // 薪资标准
  otherSubsidy: "", // 其他补贴
  bankCardNo: "", // 银行卡账号
  bankCardNoVo: "", // 银行卡账号显示值
  bankCardName: "", // 持卡人姓名
  bank: "", // 开户银行
  cardFile: "", // 银行卡扫描件

  // 其他信息
  remark: "", // 备注
  dimissionProof: "", // 离职证明
  tripartiteAgreement: "", // 三方协议
});
const tableForm = ref({
  // 教育经历
  startTime: "", // 开始时间
  endTime: "", // 结束日期
  companyName: "", // 院校名称
  profession: "", // 专业名称
  educationalBackground: "", // 学历

  // 工作经历
  positionHeld: "", // 担任职务
  mainWorkContent: "", // 主要工作内容
  remarks: "", // 备注

  // 合同信息
  yearNum: "", // 合同年限
  number: "", // 签订次数
  contractNo: "", // 合同编号
});
// 附件
const uploadFiles = (files, field) => {
  form[field] = files;
};
const handleFileDelete = (updatedFiles, field) => {
  form[field] = "";
};

const { proxy } = getCurrentInstance();
const { sys_jobtransfer_type, sys_rank_list } = proxy.useDict(
  "sys_jobtransfer_type",
  "sys_rank_list"
);

const normalizedTransferType = computed(() => {
  return sys_jobtransfer_type.value.map((item) => ({
    label: item.label,
    value: Number(item.value), // 确保为数字类型
  }));
});
onMounted(() => {
  formInfo();
  nextTick(() => {
    const formElement = formRef.value?.$el;
    if (formElement) {
      topHeight.value = formElement.offsetHeight;
      isHeightCalculated.value = true;
      console.log("Form高度:", topHeight.value);
    }
  });
});

const openDialog = (title) => {
  Object.keys(tableForm.value).forEach((key) => {
    tableForm.value[key] = "";
  });
  dialogFormVisible.value = true;
  addButtonTitle.value = title;
};

const formInfo = () => {
  const type = Number(tabIndex.value) + 1;
  let obj = {
    id: route.query.id,
    type: type,
  };

  getDetailById(obj).then((res) => {
    if (res.code === 200) {
      Object.assign(form, res.data.info);
      if (tabIndex.value == 3) {
        tabList.value[3].tableData = res.data.info.educationExperiences;
      } else if (tabIndex.value == 4) {
        tabList.value[4].tableData = res.data.info.workExperiences;
      } else if (tabIndex.value == 5) {
        tabList.value[5].tableData = res.data.info.contractInfos;
      }
    }
  });
};

const handleClick = (tab) => {
  tabIndex.value = tab.index;
  if (tab.index == 3) {
    Htitle.value = "主要教育经历 ";
  }
  if (tab.index == 4) {
    Htitle.value = "主要工作经历 ";
  }
  if (tab.index == 5) {
    Htitle.value = "主要合同经历 ";
  }
  // 清空表单
  Object.keys(form).forEach((key) => {
    form[key] = "";
  });
  // 查询数据
  formInfo();

  setTimeout(() => {
    // 获取当前激活的tab面板
    const activeTabPane = document.querySelector(
      `.el-tab-pane[aria-labelledby="tab-${tab.props.name}"]`
    );
    if (activeTabPane) {
      const tableContainer = activeTabPane.querySelector(".table-container");
      if (tableContainer) {
        const tableHeight = tableContainer.offsetHeight;
        console.log("当前tab的表格容器高度:", tableHeight);
        calculatedTableHeight.value = tableHeight - 140 + "px";
        console.log("计算后的表格高度:", calculatedTableHeight.value);
      }
    }
    if (tab.index == 3) {
      addButtonTitle.value = "新增教育经历";
    }
    if (tab.index == 4) {
      addButtonTitle.value = "新增工作信息";
    }
    if (tab.index == 5) {
      addButtonTitle.value = "新增合同信息";
    }
  }, 100);
};

// 添加控制显示加密/明文的响应式对象
const showEncrypted = reactive({
  socialSecurityNo: true,
  providentFundNo: true,
  bankCardNo: true,
});

// 添加切换显示的方法
const toggleEncrypted = (field) => {
  showEncrypted[field] = !showEncrypted[field];
};
</script>

<style lang="scss" scoped>
.contentInfo {
  padding: 20px;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.submit {
  width: 150px;
  display: flex;
  justify-content: space-around;
}

.state {
  color: var(--Primary4-950, #16191d);
  font-family: "Source Han Sans CN";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 16px 0px;
}

.stateContent {
  width: fit-content;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--Primary5-500, #33d170);
  background: var(--Primary5-50, #eafaf0);
  color: var(--Primary5-500, #33d170);
  font-size: 12px;
}

.demo-tabs {
  flex: 1;
  // display: flex;
  // flex-direction: column;
  // overflow: hidden;
}

.table-container {
  flex: 1;
  // display: flex;
  // flex-direction: column;
  // overflow: hidden;
}

:deep(.el-tab-pane) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
:deep(.upload-file-uploader) {
  display: none !important;
}
:deep(.form-group) {
  margin: 0 auto !important;
}

.form-group .group-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 4px solid #409eff;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item) .upload-btn {
  margin-left: 10px;
}

:deep(.el-form-item.group-title) {
  margin-bottom: 24px;
}

:deep(.el-form-item.group-title) .el-form-item__label {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  padding-left: 8px;
  border-left: 4px solid #409eff;
}

.title-item {
  margin-bottom: 24px;
}

.title-item .title-content {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  padding-left: 8px;
  border-left: 4px solid #409eff;
  line-height: 1.5;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  padding-left: 8px;
  border-left: 4px solid #409eff;
  margin: 10px 0 16px;
  line-height: 1.5;
}

.input-with-eye {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;

  .el-input {
    flex: 1;
  }

  .eye-icon {
    cursor: pointer;
    font-size: 16px;
    color: #909399;
    flex-shrink: 0;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
